<template>
  <div class="container">
    <div class="fill_header">
      <div  @click="goBack" class="back">
        <van-icon name="arrow-left" style="margin-bottom:2px" />返回
      </div>
      <div class="title">填写开票信息</div>
      <div class="done" @click="submitFillForm">完成</div>
    </div>

    <van-field v-model="form.buyer" is-link readonly label="购买方" placeholder="请选择购买方" @click="show = true" />

    <van-field name="radio" label="类型">
      <template #input>
        <van-radio-group v-model="form.ticket_type" checked-color="#07c160" direction="horizontal">
          <van-radio name="1">普通发票</van-radio>
          <van-radio name="2">专项发票</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <van-field label="开票项目">

    </van-field>

    <van-collapse v-model="activeName" border accordion>
      <van-collapse-item :name="i+1" v-for="(item,i) in collapses" :key="i">
        <template #title>
          <div class="active_title">
            <div class="num">{{i+1}}</div>
            <div class="delete">
              <van-icon name="delete-o" @click="onDelete(i)" />
            </div>
          </div>
        </template>
        <van-form @submit="onSubmit">
          <van-field readonly clickable name="picker" required :value="nameValue" label="商品名称" placeholder="请选择商品名称" @click="clickGoodsName" />
          <van-popup v-model="showNamePicker" position="bottom">
            <van-search v-model="searchText" placeholder="搜索" autofocus @input="onSearchName" @clear='onClearName'> </van-search>
            <van-picker show-toolbar :columns="goodsNames" @confirm="onConfirmName" @cancel="showNamePicker = false" />
          </van-popup>
          <van-field readonly clickable name="picker" required :value="codeValue" label="商品编码" placeholder="请选择商品编码" @click="clickGoodsCodes" />
          <van-popup v-model="showCodesPicker" position="bottom">
            <van-search v-model="searchCodeText" placeholder="搜索" autofocus @input="onSearchCode" @clear='onClearCode'> </van-search>
            <van-picker show-toolbar :columns="goodsCodes" @confirm="onConfirmCode" @cancel="showCodesPicker = false" />
          </van-popup>

          <van-field v-model="item.specification" label="规格型号" placeholder="请输入规格型号" />
          <van-field v-model="item.amount" label="数量" placeholder="请输入数量" />
          <van-field v-model="item.univalence" label="单价" placeholder="请输入单价" />
          <van-field v-model="item.money" label="金额" placeholder="请输入金额" />
          <van-field v-model="item.rate" label="税率" placeholder="请输入税率" />
        </van-form>
      </van-collapse-item>
    </van-collapse>

    <div class="add_btn" @click="addItem">新增开票项目</div>
    <van-popup v-model="show" round position="bottom">
      <van-search v-model="searchParams.keywords" placeholder="请输入搜索关键词" autofocus @focus="onFocus" @search="onSearch" @clear='onClear' @input="onInput" />
      <div class="names">
        <div class="name_item" v-for="item in options" :key="item.value" :class="item.isSelect?'select':''" @click="selectName(item)">
          <div>{{item.text}}</div>
        </div>
      </div>
      <div class="add_buyer" @click="addBuyer">新增购买方</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      searchParams: {
        keywords: "",
      },
      form: {
        buyer: "",
        ticket_type: "",
      },
      options: [
        {
          text: "陕西蓝宇科维信息科技有限公司",
          value: "332200",
        },
        {
          text: "沈阳英之辅语言培训学校",
          value: "3203400",
        },
        {
          text: "北京华体世纪体育场馆经营管理有限公司黄冈分公司",
          value: "320300",
        },
        {
          text: "悦动悦愉悦（厦门）健身有限公司",
          value: "320200",
        },
        {
          text: "郑州市中原区黑马健身馆",
          value: "321100",
        },
        {
          text: "苏州芯图地理信息技术有限公司",
          value: "321760",
        },
        {
          text: "北京圣题文化交流有限公司",
          value: "376760",
        },
        {
          text: "苏州威哇健身管理有限公司",
          value: "854760",
        },
        {
          text: "新京武（上海）体育文化发展有限公司",
          value: "884560",
        },
        {
          text: "广州市三五体育发展有限公司",
          value: "845590",
        },
      ],
      activeName: "",
      nameValue: "",
      codeValue: "",
      showNamePicker: false,
      showCodesPicker: false,
      goodsNames: ["雪碧", "可乐", "七喜", "百岁山", "康师傅"],
      goodsCodes: ["110", "111", "112", "113"],
      collapses: [
        {
          name: "",
          num: "",
          good_name: "",
          code: "",
          specification: "",
          amount: "",
          univalence: "",
          money: "",
          rate: "",
        },
      ],
      searchText: "",
      searchCodeText: "",
    };
  },
  methods: {
    goBack(){
      this.$router.back()
    },
    addBuyer(){
      this.$router.push('/addBuyer')
    },
    selectName(item) {
      this.form.buyer = item.text;
      this.show = false;

      this.options.forEach((ele) => {
        ele.isSelect = false;
      });
      item.isSelect = true;
    },
    submitFillForm() {
      if(this.form.buyer==''){
        this.$toast("请选择购买方");
      }else if(this.form.ticket_type==''){
        this.$toast("请选择发票类型");
      }else{
        this.$toast.success("提交数据");
      }
    },
    onDelete(i) {
      if (this.collapses.length > 1) {
        this.collapses.splice(i, 1);
      } else {
        this.$toast("至少保留一项数据！");
      }
    },
    addItem() {
      this.collapses.push({
        name: "",
        num: "",
        good_name: "",
        code: "",
        specification: "",
        amount: "",
        univalence: "",
        money: "",
        rate: "",
      });
    },
    clickGoodsName() {
      this.showNamePicker = true;
    },
    clickGoodsCodes() {
      this.showCodesPicker = true;
    },
    onSearchName(val) {
      this.goodsNames = this.goodsNames.filter((item) => {
        return item.indexOf(this.searchText.trim()) !== -1;
      });

      if (val == "") {
        this.onClearName();
      }
    },
    onSearchCode(val) {
      this.goodsCodes = this.goodsCodes.filter((item) => {
        return item.indexOf(this.searchCodeText.trim()) !== -1;
      });

      if (val == "") {
        this.onClearCode();
      }
    },
    onClearName() {
      this.goodsNames = ["雪碧", "可乐", "七喜", "百岁山", "康师傅"];
    },
    onClearCode() {
      this.goodsCodes = ["110", "111", "112", "113"];
    },
    onConfirmName(value) {
      this.nameValue = value;
      this.showNamePicker = false;
    },
    onConfirmCode(value) {
      this.codeValue = value;
      this.showCodesPicker = false;
    },
    onSubmit() {},
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.form.buyer = selectedOptions.map((option) => option.text).join("/");
    },
    onSearch() {},
    onFocus() {},
    onClear() {
      this.options = [
        {
          text: "陕西蓝宇科维信息科技有限公司",
          value: "332200",
        },
        {
          text: "沈阳英之辅语言培训学校",
          value: "3203400",
        },
        {
          text: "北京华体世纪体育场馆经营管理有限公司黄冈分公司",
          value: "320300",
        },
        {
          text: "悦动悦愉悦（厦门）健身有限公司",
          value: "320200",
        },
        {
          text: "郑州市中原区黑马健身馆",
          value: "321100",
        },
        {
          text: "苏州芯图地理信息技术有限公司",
          value: "321760",
        },
        {
          text: "北京圣题文化交流有限公司",
          value: "376760",
        },
        {
          text: "苏州威哇健身管理有限公司",
          value: "854760",
        },
        {
          text: "新京武（上海）体育文化发展有限公司",
          value: "884560",
        },
        {
          text: "广州市三五体育发展有限公司",
          value: "845590",
        },
      ];
    },

    onInput(val) {
      this.options = this.options.filter((item) => {
        return item.text.indexOf(this.searchParams.keywords.trim()) !== -1;
      });

      if (val == "") {
        this.onClear();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fill_header {
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  background-color: #07c160;
  display: flex;
  justify-content: space-between;
  .back{
     flex: 1.5;
  }
  .title {
    flex: 8;
  }
  .done {
    flex: 1.5;
  }
}

.active_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #07c160;
  .delete {
    color: rgb(252, 119, 119);
    font-size: 15px;
    z-index: 999;
  }
  .num {
    border-radius: 50%;
    color: #fff;
    background-color: #07c160;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
  }
}

.add_btn {
  width: 80vw;
  height: 3rem;
  background-color: #07c160;
  text-align: center;
  line-height: 3rem;
  border-radius: 0.3rem;
  margin: auto;
  color: #fff;
  font-size: 16px;
  margin-top: 1rem;
}
.select {
  color: #07c160;
}
.name_title {
  padding: 1rem;
}
.names {
  height: 30vh;
  overflow-y: auto;
  .name_item {
    padding: 0rem 2rem;
    height: 4rem;
    line-height: 4rem;
    div{
      border-bottom: 1px solid #eee;
    }
  }
}
.name_title {
  text-align: center;
}

.add_buyer{
  text-align: center;
  height: 3rem;
  line-height: 3rem;
  background-color: #07c160;
  color: #fff;
}


</style>